<template>
	<gracePage headerBG="#F5F5F5" footerBg="#F5F5F5" class="main-bodybg-color" :bounding="false">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bodybg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">新人福利</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="main-bodybg-color">
			<view style="background-image:url(https://zhenzhixiao.cn/index/images/free01.png);background-size:100% 100%; height: 509rpx;width: 750rpx;">
				<view class="grace-flex-center pt-5"><image src="../../../static/images/free03.png" style="width: 146rpx;height: 35rpx;"></image></view>
				<view class="grace-flex-center mt-2-5"><image src="../../../static/images/free02.png" style="width: 552rpx;height: 115rpx;"></image></view>
			</view>
			<view class=" mt-50">
				<view class="mx-2 goods-list grace-wrap grace-flex-vtop">
					<view style="flex: 0 0 33.33%;" class="grace-flex-center" v-for="(list, index) in lists.list" :key="index" @click="gotoFreeFn(list.goods_id)">
						<view class="grace-waterfall-item">
							<view class="grace-img-card-item grace-bg-white my-shop-large ">
								<image
									:src="list.goods_thumb"
									mode="widthFix"
									class="my-shop-large-img"
									:style="{ width: '226rpx', height: '226rpx' }"
									lazy-load
								></image>
								<view class=" px-2"><text class="grace-img-card-title grace-h5" style="height: 40rpx;line-height: 40rpx;">{{list.goods_name}}</text></view>
								<view class="grace-flex-center my-1 ">
									<view class="grace-flex-end grace-flex-vcenter">
										<view class="grace-rows"><text class="grace-h4 grace-red">0元</text></view>
										<text class="grace-text-small grace-gray grace-line-through mt-1">￥{{list.goods_price}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import { mapState} from 'vuex';
export default {
	data() {
		return {
			lists:[],
			preventStatus:true
		};
	},
	onShow() {},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		}),
	},
	onLoad() {
		// 得到订单详情
		this.__init();
	},
	methods: {
		async __init() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_goods' ,'free': 'all' ,"page": 1})
			this.lists = data
		},
		gotoFreeFn(id){
			console.log('id',id)
			// this.preventStatus 解决页面点击多次多次跳转的问题
			if(this.preventStatus){
				this.preventStatus = false;
				// 判断用户
				if(this.loginStatus){
					console.log('this.userInfo',this.userInfo)
					// 判断用户是否参加过该活动
					if(this.userInfo.is_free === '0'){
						uni.navigateTo({
							url: '/pages/shop/shopInfo2/shopInfo2?id='+id+'&inventory=1',
							complete:()=>{
								this.preventStatus = true;
							}
						});
					}else{
						console.log(111111111)
						uni.showToast({
							title:"不具备该资格" ,
							image: '/static/images/error.png'
						})
						this.preventStatus = true;
					}
				}else{
					uni.navigateTo({
						url: '/pages/login/login',
						complete:()=>{
							this.preventStatus = true;
						}
					});
				}
			}
			
		},
	},
	components: { gracePage }
};
</script>
<style scoped>

.grace-img-card-item {
	width: 226rpx;
}
.mt-50 {
	margin-top: -50rpx;
}
/* 分类 */
.my-shop-large-img {
	border-bottom-left-radius: 0rpx;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	border-bottom-right-radius: 0rpx;
}
.my-shop-large {
	border-radius: 30rpx;
}
.goods-list {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	/* justify-content: space-between; */
}
</style>
